<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="数据统计"/>
</jsp:include>
<div style="height:10px;padding-top:10px;"></div>
<jsp:include page="/wm/common/list/formSearch_formStart.jsp" ></jsp:include>
<label style="text-align: left;" class="layui-form-label">日期范围</label>
		<div class="layui-input-inline">
			<jsp:include page="/wm/common/edit/form_datebmrq.jsp">
			<jsp:param name="wm_name" value="startTime"/>
			<jsp:param name="wm_value" value="${entity.selecttime }"/>
			<jsp:param name="wm_type" value="date"/>
		    </jsp:include>
		</div>
		&nbsp;-&nbsp;
		<div class="layui-input-inline">
			<jsp:include page="/wm/common/edit/form_datebmrq.jsp">
			<jsp:param name="wm_name" value="endTime"/>
			<jsp:param name="wm_value" value="${entity.selecttime }"/>
			<jsp:param name="wm_type" value="date"/>
		    </jsp:include>
		</div>
	<a class="layui-btn" href="javascript:wm.list(1,'/agency/statistics/getOrderAnalyze.json');" style="margin-left: 15px;">搜索</a>
		<a class="layui-btn " onclick="getChengdanExecl();">导出excel</a>
</form>
<style>
	.losk{
		padding: 20px 0;
		margin: 0 0 40px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	#container{
		display: block;
		flex: 1;
	}
	.iw_table{
		width: 90vw;
		margin: -60px auto 50px;
	}
	#container>div:first-child {
	left: 30px;
}

</style>
<div class="losk">
	<div id="container" style="height: 500px;width:auto；margin:60px auto 100px;"></div>
</div>	
<table class="aui-table-responsive layui-table iw_table" style="min-width: 900px;"id="orderfenxi">
	<thead>
		<tr>
			<th width="50px" style="text-align:center;">日期</th>
			<th width="50px" style="text-align:center;">订单数量</th>
			<th width="50px" style="text-align:center;">新用户下单数</th>
			<th width="50px" style="text-align:center;">老用户下单数</th>
			<th width="50px" style="text-align:center;">完成量</th>
			<th width="50px" style="text-align:center;">取消量</th>
			<th width="50px" style="text-align:center;">待取量</th>
			<th width="50px" style="text-align:center;">异常量</th>
			<th width="50px" style="text-align:center;">完成订单均价(元)</th>
			<th width="50px" style="text-align:center;">总订单均重(kg)</th>
		</tr> 
	</thead>
	<tbody id="tbody">
		<tr >
			<td style="text-align:center;">{riqi}</td>
			<td style="text-align:center;">{dingdanShuliang}</td>
			<td style="text-align:center;">{newUserNum}</td>
			<td style="text-align:center;">{oldUserNum}</td>
			<td style="text-align:center;">{wanchengNum}</td>
			<td style="text-align:center;">{quxiaoNum}</td>
			<td style="text-align:center;">{daiquNum}</td>
			<td style="text-align:center;">{yichangNum}</td>
			<td style="text-align:center;">{junjia}</td>
			<td style="text-align:center;">{junzhong}</td>
			
		</tr>
	</tbody>
</table>
</form>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">

//列表的模版
var goodsListTemplate = document.getElementById("tbody").innerHTML;
function goodsListDate(item){
	item.junzhong = item.junzhong/1000;
	item.junjia = item.junjia/100
	return goodsListTemplate
		.replace(/\{riqi\}/g, item.riqi)
		.replace(/\{dingdanShuliang\}/g, item.dingdanShuliang)
		.replace(/\{newUserNum\}/g, item.newUserNum)
		.replace(/\{oldUserNum\}/g, item.oldUserNum)
		.replace(/\{wanchengNum\}/g, item.wanchengNum)
		.replace(/\{quxiaoNum\}/g, item.quxiaoNum)
		.replace(/\{daiquNum\}/g, item.daiquNum)
		.replace(/\{yichangNum\}/g, item.yichangNum)
		.replace(/\{junjia\}/g, item.junjia.toFixed(2))
		.replace(/\{junzhong\}/g, item.junzhong.toFixed(2))
		;
}

function loadData(data){
		msg.close();    //关闭“更改中”的等待提示
		var list = data.list;
		if(data.result == '1'){
			
			//列表
			var html = '';
			for(var index in data.list){
				var item = data.list[index];
				if (item.junjia > 0 && item.wanchengNum > 0) {
					item.junjia = item.junjia/item.wanchengNum;
				}
				if (item.junzhong > 0 && item.dingdanShuliang > 0) {
					item.junzhong = item.junzhong/item.dingdanShuliang;
				}
				html = html + goodsListDate(item);
			}
			document.getElementById("tbody").innerHTML = html;
			
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			var option;
			var a = data.dateI;
		const colors = ['#5470C6', '#EE6666','#4bc0d6','#93c47d','#ff00ff','#d2691e','#4bc54b','#e31e1e','#ffd966'];
		option = {
				title: {
				    text: '订单分析',
				    left: '10px'
				  },
				  legend: {
					  top: '23px',
					  data: ["订单总数", "新用户下单数", "老用户下单数", "完成量", "取消量",
							"待取量", "异常量", "完成订单均价(元)","总订单均重(kg)"
						]  
				  },
				  color: colors,
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'cross'
				    }
				  },
				  
				  grid: {
				    top: 70,
				    bottom: 50
				  },
				  xAxis: [
				    {
				      type: 'category',
				      axisTick: {
				        alignWithLabel: true
				      },
				      axisLine: {
				        onZero: false,
				        lineStyle: {
				          color: colors[1]
				        }
				      },
				      axisPointer: {
				        label: {
				          formatter: function (params) {
				            return (
				              params.value
				            );
				          }
				        }
				      },
				      // 日期遍历
				      data: a
				    },

				  ],
				  yAxis: [
					  {
							type: "value",
							name: "个数",
							axisLabel: {
								formatter: "{value} (个)"
							}
						}, {
							type: "value",
							name: "金额",
							axisLabel: {
								formatter: "{value} (元)"
							}
						},  {
							type: "value",
							name: "重量",
							axisLabel: {
								formatter: "{value} (kg)"
							},
							position: "left",
							offset: 60
						}
				  ],
				  series: [
				    
				    {
				      name: '订单总数',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['订单总数']
				    },
				    {
				      name: '新用户下单数',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['新用户下单数']
				    },
				    {
				      name: '老用户下单数',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['老用户下单数']
				    },
				    {
				      name: '完成量',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['完成量']
				    },
				    {
				      name: '取消量',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['取消量']
				    },
				    {
				        name: '待取量',
				        type: 'line',
				        smooth: true,
				        yAxisIndex: 0,
				        emphasis: {
				          focus: 'series'
				        },
				        data: data.jsonObject['待取量']
				      },
				    {
				      name: '异常量',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 0,
				      emphasis: {
				        focus: 'series'
				      },
				      data:  data.jsonObject['异常量']
				    },
				    {
				      name: '完成订单均价(元)',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 1,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['订单均价']
				    },
				    {
				      name: '总订单均重(kg)',
				      type: 'line',
				      smooth: true,
				      yAxisIndex: 2,
				      emphasis: {
				        focus: 'series'
				      },
				      data: data.jsonObject['订单均量']
				    }
				  ]
				};
		if (option && typeof option === 'object') {
		    myChart.setOption(option);
		}
		
	}
	
}

wm.post('/agency/statistics/getOrderAnalyze.json',{}, function(data){
	loadData(data);
});


</script>


<style>
#page{
	display:none;
}
</style>
<jsp:include page="/wm/common/page.jsp"></jsp:include>
<script>
wm.list = function(currentPage, api, extendFunction){
	if(typeof(api) != 'undefined' && api != null){
		wm.list_api = api;
	}
	if(typeof(wm.list_api) == 'undefined' || wm.list_api == null || wm.list_api.length < 1){
		wm.list_api = 'list.json';
	}
	var data = wm.getJsonObjectByForm($('.toubu_xnx3_search_form'));
	data.currentPage = currentPage;
	msg.loading('加载中');
	wm.post(wm.list_api ,data,function(data){
		msg.close();    //关闭“更改中”的等待提示
		checkLogin(data);	//判断是否登录
	
		//将json返回的赋予 vue的全局变量
		for(var key in data){
			app[key] = data[key];
		}
		
		//已登陆
		if(data.result == '1'){
			loadData(data);
			
			
		}else{
			msg.failure(data.info);
		}
	});
}

/**
 * 对象转url参数
 * @param {*} data,对象
 * @param {*} isPrefix,是否自动加上"?"
 */
function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
    let prefix = isPrefix ? '?' : ''
    let _result = []
    if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets';
    for (let key in data) {
        let value = data[key]
        // 去掉为空的参数
        if (['', undefined, null].indexOf(value) >= 0) {
            continue;
        }
        // 如果值为数组，另行处理
        if (value.constructor === Array) {
            // e.g. {ids: [1, 2, 3]}
            switch (arrayFormat) {
                case 'indices':
                    // 结果: ids[0]=1&ids[1]=2&ids[2]=3
                    for (let i = 0; i < value.length; i++) {
                        _result.push(key + '[' + i + ']=' + value[i])
                    }
                    break;
                case 'brackets':
                    // 结果: ids[]=1&ids[]=2&ids[]=3
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
                    break;
                case 'repeat':
                    // 结果: ids=1&ids=2&ids=3
                    value.forEach(_value => {
                        _result.push(key + '=' + _value)
                    })
                    break;
                case 'comma':
                    // 结果: ids=1,2,3
                    let commaStr = "";
                    value.forEach(_value => {
                        commaStr += (commaStr ? "," : "") + _value;
                    })
                    _result.push(key + '=' + commaStr)
                    break;
                default:
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
            }
        } else {
            _result.push(key + '=' + value)
        }
    }
    return _result.length ? prefix + _result.join('&') : ''
}


//导出execl
function getChengdanExecl(){
	var data = wm.getJsonObjectByForm($('.toubu_xnx3_search_form'));
	 window.open('/agency/outdoc/getOrderDataExecl.json' + queryParams(data)); 
} 

</script>
<jsp:include page="/wm/common/foot.jsp"></jsp:include>